<template>
	<custom-page title="申请提现" background-color="#F9F9F9">
		<template #page>
			<view class="page-content">
				<view class="top-layout">
					<view class="title-row">
						<image :src="asserts.ic_safety_blue"></image>
						<view>请确保余额信息，保障您资金安全</view>
					</view>
					<view class="input-row">
						<input v-model="money" placeholder="请输入提现金额" type="digit"/>
						<view>全部提现</view>
					</view>
					<view class="content">
						可提现金额：<text>{{walletInfo.totalMoneyStr||0}}</text>
					</view>
				</view>
				<view class="apply-btn" :class="money?'':'enable'" @click="appplyWithdrawClick">申请提现</view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				walletInfo: {},
				money: '',
			}
		},
		onLoad() {
			this.getBalanceInfo()
		},
		methods: {
			//我的钱包
			getBalanceInfo(){
				this.requestCenter.getBalanceInfo().then(res => {
					this.walletInfo = res
				})
			},
			
			//申请提现
			appplyWithdrawClick(){
				if(this.money){
					uni.showModal({
						title: '确定提现吗？',
						success: (modal) => {
							if (modal.confirm) {
								let params = {
									money: Number(this.money)
								}
								this.requestCenter.withdrawApply(params).then(res => {
									uni.showToast({
										title: "申请成功",
										duration: 500,
										complete: () => {
											uni.$emit('withdrawUpdate')
											uni.navigateBack()
										}
									})
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.top-layout{
		width: calc(100% - 64rpx);
		margin: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 32rpx;
		.title-row{
			width: 100%;
			height: 64rpx;
			padding: 0 32rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			background: #EAFBFF;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			image{
				width: 28rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
			view{
				font-size: 28rpx;
				color: #01CBFF;
			}
		}
		.input-row{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
			input{
				flex: 1;
				height: 112rpx;
				font-size: 48rpx;
			}
			view{
				font-size: 28rpx;
				color: #01CBFF;
			}
		}
		.content{
			padding-left: 32rpx;
			font-size: 28rpx;
			color: #585F70;
			line-height: 32rpx;
			margin-top: 16rpx;
			text{
				font-weight: 500;
			}
		}
	}
	.apply-btn{
		width: calc(100% - 64rpx);
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 0 32rpx;
		background: #01CBFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(1,203,255,0.05);
		border-radius: 16rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.enable{
		opacity: 0.2;
	}
</style>
